<!--
 * @Descripttion: 使用方法：<upload :pic_name="'pic_name'"></upload>
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-10-29 10:45:45
-->
<template>
	<div>
		<div :class="overflow ? 'wrap_img_upload' : ''">
			<el-upload
				action
				:before-upload="beforeAvatarUpload"
				:http-request="handleUpload"
				:on-success="handleSuccess"
				multiple
				:show-file-list="false"
				:list-type="listType"
			>
				<el-button v-if="pic_url == ''" size="small" type="primary">点击上传</el-button>
				<img v-if="pic_url != ''" :src="head_url + pic_url" class="avatar" />
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
				<img width="100%" :src="dialogImageUrl" alt />
			</el-dialog>
		</div>
		<a v-if="pic_url != ''" class="lookImages cursor-pointer" @click="handlePreview2(head_url + pic_url)">查看原图</a>
	</div>
</template>

<script>
import {uploadOSS} from '../../../api/upload'

export default {
	name: 'Upload',
	props: {
		limit: {
			type: Number,
			default: 1
		},
		action: {
			type: String,
			default: ''
		},
		headers: {
			type: Object,
			default: () => {}
		},
		pic_name: {
			type: String,
			default: ''
		},
		pic_url: {
			type: String,
			default: ''
		},
		overflow: {
			type: Boolean,
			default: true
		},
		name: {
			type: String,
			default: ''
		},
		listType: {
			type: String,
			default: 'picture-card'
		}
	},
	data() {
		return {
			head_url: 'https://img.zhongfuyun.com/',
			fileList: [],
			dialogImageUrl: '',
			dialogVisible: false
		}
	},
	methods: {
		handleRemove(file, fileList) {
			this.fileList = []
		},
		handlePreview(file) {
			console.log(file)
			this.dialogImageUrl = file.url
			this.dialogVisible = true
		},
		handlePreview2(file) {
			this.dialogImageUrl = file
			this.dialogVisible = true
		},
		handleExceed(files, fileList) {
			//文件超出个数限制时的钩子触发函数，limit限制数量
			this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
		},
		beforeRemove(file, fileList) {
			//移除图片
			this.fileList = []
			// return this.$confirm(`确定移除 ${file.name}？`);
		},
		handleSuccess(response, file, fileList) {
			this.fileList = fileList
			this.$emit('on-success', file, fileList)
		},
		beforeAvatarUpload(file) {
			// console.log(file.type);
			// const isJPG = file.type === "image/jpeg";

			// if (!isJPG) {
			//     this.$message.error("上传格式只能是 JPG !");
			// }
			if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {
				this.$message.error('上传格式不正确 !')
				return false
			}

			const isLt2M = file.size / 1024 / 1024 < 5 //这里做文件大小限制
			if (!isLt2M) {
				this.$message.error('上传文件大小不能超过 5MB!')
				return false
			}
			// return isJPG;
			return file.type
		},
		/**
		 * 自定义上传方法
		 */
		async handleUpload(option) {
      try {
        const ret = await uploadOSS({
          file: option.file,
          type: 'file'
        })

        this.fileList.push({
          pic_name: this.pic_name,
          name: option.name,
          url: this.head_url + ret.url
        })

        this.sendMsg(ret.url)
      } catch (err) {
        console.log('err', err)
      }
		},
		//子向父传值
		sendMsg(url) {
			this.$emit('func', url)
		}
	}
}
</script>

<style scoped>
.wrap_img_upload {
	width: 148px;
	height: 148px;
	overflow: hidden;
}
.avatar {
	width: 145px;
	height: 145px;
}

.lookImages {
	color: #6777ef;
	font-size: 14px;
	line-height: 30px;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Uploadedit.vue